<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
			}
			#as{
				//animation: spread 6s linear infinite;
			}
			#div1{
				width: 100%;
				height: 400px;
				background:rgba(0,0,0,0.2);
				background-image: url("../img/1 (13).jpg");
				background-position: 0% 0%;
				background-repeat: round;
				//animation: spread 6s linear infinite;
			}
			@keyframes spread{
			0%{
				opacity: 0.8;
			}
			50%{
				opacity: 0.3;
			}
			100%{
				opacity: 0.8;
			}
		}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<img src="../img/1 (13).jpg" id="as"/><br />
		<img src="../img/1 (8).jpg" onclick="test2()"/>
		<img src="../img/1 (9).jpg" onclick="test3()"/>
		<img src="../img/1 (10).jpg"  onclick="test4()"/>
		<img src="../img/1 (11).jpg"  onclick="test5()"/>
		<img src="../img/1 (13).jpg"  onclick="test6()"/><br />
		<button onclick="test1()" id="btn">下一个</button>
		<button onclick="test0()" id="btn">上一个</button>
		<script type="text/javascript">
			//上一个
			function test0(){
				a--;
				if(a==1){
					$("#div1").css("background-image","url('../img/1 (8).jpg')")
					$("#as").attr("src","../img/1 (8).jpg")

				}else if(a==2){
					$("#div1").css("background-image","url('../img/1 (9).jpg')")
					$("#as").attr("src","../img/1 (9).jpg")

				}else if(a==3){
					$("#div1").css("background-image","url('../img/1 (10).jpg')")
					$("#as").attr("src","../img/1 (10).jpg")

				}else if(a==4){
					$("#div1").css("background-image","url('../img/1 (11).jpg')")
					$("#as").attr("src","../img/1 (11).jpg")
					

				}else{
					$("#div1").css("background-image","url('../img/1 (13).jpg')")
					$("#as").attr("src","../img/1 (13).jpg")
					a=5;
				}
			}
			//点击
			function test2(){
				a=1;
				test1();
			}
			function test3(){
				a=2;
				test1();
			}
			function test4(){
				a=3;
				test1();
			}
			function test5(){
				a=4;
				test1();
			}
			function test6(){
				a=5;
				test1();
			}
			//全局变量
			var a=1;
			//定时器
			setInterval("test1()",3000);	
			//下一个
			function test1(){
				if(a==1){
					$("#div1").css("background-image","url('../img/1 (8).jpg')")
					$("#as").attr("src","../img/1 (8).jpg")
					a++;
				}else if(a==2){
					$("#div1").css("background-image","url('../img/1 (9).jpg')")
					$("#as").attr("src","../img/1 (9).jpg")
					a++;
				}else if(a==3){
					$("#div1").css("background-image","url('../img/1 (10).jpg')")
					$("#as").attr("src","../img/1 (10).jpg")
					a++;
				}else if(a==4){
					$("#div1").css("background-image","url('../img/1 (11).jpg')")
					$("#as").attr("src","../img/1 (11).jpg")
					
					a++;
				}else{
					$("#div1").css("background-image","url('../img/1 (13).jpg')")
					$("#as").attr("src","../img/1 (13).jpg")
					a=1;
				}
			}
		</script>
		
	</body>
</html>
